// dom 
// id name 标签  选择器  class  
// 给每个h3 绑定点击事件 

// 每个h3 增加 或者移出 class="active" 就是dom 操作class类 
// className 
// classList

window.onload = function () {
    var divEle = document.getElementById('cen_right_top');
    var h3Ele = divEle.querySelectorAll('h3');
    var divEle = divEle.querySelectorAll('div');


    for (var i = 0; i < h3Ele.length; i++) {
        // 给每个选项卡 绑定上点击事件后  for循环结束  
        // 所以function中的 i是for循环结束以后的i 
        // 

        // 为了避免 所有的选项卡 点击的时候拿到的都是3  
        // 提前准备一个容器 保存原来的索引  0   1  2 
        h3Ele[i].dataset.index = i  //data-index
        h3Ele[i].onclick = function () {
            for(var j=0;j<h3Ele.length;j++){
                // 让每个h3 移出class 样式
                // 让每个div 全部隐藏 
                // 长度一致 公用一个for   0  1  2
                h3Ele[j].className = "";
                divEle[j].style.display = "none";
            }
            h3Ele[this.dataset.index].className = "active";
            divEle[this.dataset.index].style.display = "block";
        }
    }

}


/* 
    i 是全局变量  3
    第一次循环  给第一个按钮绑定了点击事件
    btn[0].onclick  = function(){
        console.log(i) // 3
    }
    第二次循环  给第二个按钮绑定了点击事件
     btn[1].onclick  = function(){
        console.log(i) // 3 
    }

    第三个循环  给第三个按钮绑定了点击事件

     btn[2].onclick  = function(){
        console.log(i) // 3 
    }





*/